<!-- 用户列表 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label">用户列表</p>
        <div class="mt10">
            <dxtable czWidth="240" :dataJson="dataJson" :portUrl="portUrl" :isshowXz="false" :qx="qx" 
                ref="databale">
            </dxtable>
        </div>
    
    </div>
    <n-modal v-model:show="showModal" preset="card" style="width: 800px;">
    <template #header>
    <div>已分享</div>
    </template>
    <div>
        <n-table :single-line="false">
    <thead>
      <tr>
        <th>头像</th>
        <th>昵称</th>
        <th>手机号</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="sd in jsdfsd">
        <td><img :src="sd.headPortrait" class="fddsftyrty cz"/></td>
        <td><span>{{ sd.nickname }}</span></td>
        <td><span>{{sd.phone}}</span></td>
        <td><span>{{sd.addTime}}</span></td>
        </tr>
        </tbody>
        </n-table>

    </div>
    <template #action>
    <div class="tr">
    <n-button @click="showModal=false"> 关闭 </n-button>
    </div>
    </template>
    </n-modal>
</template>
<script lang='ts' setup>
import dxtable from "../../components/util/dxtable.vue";
import { dxget, dxpost, qurl, hf } from "../../util/index";
import { h, ref, reactive } from "vue";
import { NButton,NSwitch } from "naive-ui"
import expenseCalendar from "./list.vue";
const showModal = ref(false)
const openid = ref()
const jsdfsd = ref([])
const initeer = () => {
    databale.value.initDataExpose();
};
const databale = ref();
// 弹窗公用该列表
let dataJson = reactive([
    {
        title: '头像',
        key: 'headimgurl',
        width:100,
        render(row) {
            return h('img', { class: "dsfsdtrtr", src: row.headPortrait })
        }
    },
    {
        title: "昵称",
        key: "nickname",
        search: true, // 是否在搜索栏展示
    }, {
        title: "手机号",
        key: "phone",
        width:120,
        search: true, // 是否在搜索栏展示
    },
    {
        title: "openid",
        key: "openid",
    },

    {
        title: "登录ip",
        key: "ip",
        width:120,
    },{
        title: "所在城市",
        key: "address",
    },{
        title: "是否展示分享按钮",
        render: (row) => {
      let jdfds = 2;
      return [
        h(NSwitch, {
          "default-value": row.iszs == 2 ? true : false,
          "on-update:value": async (e) => {
            if (row.iszs == 2) {
              jdfds = 1;
            }
            await dxpost(portUrl, { id: row.id, iszs: jdfds }, "put");
          },
        }),
      ];
    },
    },
    {
        title: "已分享",
        key: "xiaji",
        render(row){
            return h("span",{class:"ls sz",onClick:async()=>{
                kdsfdsf(row)
            }},"已分享("+row.xiaji+")点击查看详情")
        }
    },
    


]);
const Userid = localStorage.id
let portUrl = "meilong/wxcharuser/wxcharuser"
const qx = {
    DeletePermissionID: " mrwxcharUserdel", //删除
    EditPermissionIdentifier: " mrwxcharUserbj222", // 编辑
    NewPermissionIdentifier: " mrwxcharUserxz", // 新建
    ViewPermissionID: " mrwxcharUserck", // 查看
};
const kdsfdsf = async(row)=>{
    jsdfsd.value = []
    showModal.value = true
    const {data}:any = await dxget("meilong/api/getxiaji",{
        openid:row.openid
    })
    jsdfsd.value = data

}
</script>

<style scoped>
    .fddsftyrty{
        width: 40px;
        height: 40px;
        border-radius: 50%;

    }
</style>
